<dialog #dialog>
  <dstore-close-button [dialog]="dialog"></dstore-close-button>
  <ng-container *ngIf="comment">
    <div class="title" i18n>Edit Comment</div>
    <div class="app">
      <ng-container *ngIf="comment.soft as app; else emptyIconRef">
        <img class="icon" dstoreCover="icon" [src]="app.info.icon" [routerLink]="['/app', app.name]" />
      </ng-container>
      <ng-template #emptyIconRef>
        <img class="icon" dstoreCover="icon" dstoreCover="icon" />
      </ng-template>
      <div class="info">
        <span class="name">{{ comment.soft?.info?.name }}</span>
        <span class="time">
          <span i18n>Comment Date:</span>
          <span>{{ _comment.createTime | date: 'yyyy-MM-dd' }}</span>
        </span>
        <span class="version"> <span i18n>Version:</span> {{ _comment.version }} </span>
      </div>
    </div>
    <div class="content">
      <textarea [(ngModel)]="content" (keyup.control.enter)="submit()"></textarea>
      <div class="rate">
        <span i18n>Rate:</span>
        <dstore-star [readonly]="false" [(rate)]="rate" #star></dstore-star>
        <span class="star">{{ star.rateHover }}</span>
      </div>
    </div>
    <div class="control">
      <ng-container *ngIf="!deleteConfirm; else Delete">
        <button (click)="deleteConfirm = true" i18n>Delete</button>
        <div *ngIf="comment?.soft?.package">
          <span class="error" *ngIf="error">
            <ng-container [ngSwitch]="error">
              <span class="submitError" *ngSwitchCase="CommentError.AllInvalid" i18n
                >Please rate and post your comment</span
              >
              <span class="submitError" *ngSwitchCase="CommentError.CommentInvalid" i18n
                >Please input your comment</span
              >
              <span class="submitError" *ngSwitchCase="CommentError.RateInvalid" i18n>Please rate</span>
              <span class="submitError" *ngSwitchCase="CommentError.Failed" i18n>Failed to submit</span>
            </ng-container>
          </span>
          <button (click)="closed()" i18n>Cancel</button> &nbsp;
          <button class="primary" i18n (click)="submit()">Submit</button>
        </div>
      </ng-container>
      <ng-template #Delete>
        <div i18n>Are you sure you want to delete this comment?</div>
        <div>
          <button (click)="deleteConfirm = false" i18n>Cancel</button> &nbsp;
          <button class="primary warn" (click)="delete()" i18n>Confirm</button>
        </div>
      </ng-template>
    </div>
  </ng-container>
  <ng-template #loading>
    <div class="empty">
      <div class="loadingContainer"><app-wait></app-wait></div>
    </div>
  </ng-template>
</dialog>
